<template>
  <!-- 试题录入 -->
  <div class="root">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 学科 -->
      <el-form-item label="学科 :" prop="subjectID">
        <el-select class="inp" filterable v-model="ruleForm.subjectID">
          <el-option
            v-for="item in subjectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 目录 -->
      <el-form-item label="目录 :" prop="catalogID">
        <el-select class="inp" filterable v-model="ruleForm.catalogID">
          <el-option
            v-for="item in catalogOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 企业 -->
      <el-form-item label="企业 :" prop="enterpriseID">
        <el-select class="inp" filterable v-model="ruleForm.enterpriseID">
          <el-option
            v-for="item in companyOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 城市 -->
      <el-form-item label="城市 :" prop="province">
        <el-select
          class="cityInp"
          @change="handleProvince"
          filterable
          v-model="ruleForm.province"
        >
          <el-option
            v-for="item in citySelect.province"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>

        <el-select class="cityInp" filterable v-model="ruleForm.city">
          <el-option
            v-for="item in citySelect.cityDate"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 方向 -->
      <el-form-item label="方向 :" prop="direction">
        <el-select class="inp" filterable v-model="ruleForm.direction">
          <el-option
            v-for="item in direction"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 题型 -->
      <el-form-item label="题型 :" prop="questionType">
        <el-radio-group v-model="ruleForm.questionType">
          <el-radio label="1">单选</el-radio>
          <el-radio label="2">多选</el-radio>
          <el-radio label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 难度 -->
      <el-form-item label="难度 :" prop="difficulty">
        <el-radio-group v-model="ruleForm.difficulty">
          <el-radio label="1">简单</el-radio>
          <el-radio label="2">一般</el-radio>
          <el-radio label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 题干 -->
      <el-form-item label="题干 :" prop="question">
        <quillEditor
          v-model="ruleForm.question"
          class="myQuillEditor"
        ></quillEditor>
      </el-form-item>

      <!-- 选项 -->
      <el-form-item class="questionChoice" label="选项 :">
        <div class="choice">
          <el-radio
            class="radio"
            v-model="ruleForm.options[0].isRight"
            :label="1"
            >A:</el-radio
          >
          <el-input class="inp" v-model="ruleForm.options[0].title"></el-input>
          <el-upload multiple action="" v-model="ruleForm.options[0].img">
            <el-button>上传图片</el-button>
          </el-upload>
        </div>

        <div class="choice">
          <el-radio
            class="radio"
            v-model="ruleForm.options[1].isRight"
            :label="1"
            >B:</el-radio
          >
          <el-input class="inp" v-model="ruleForm.options[1].title"></el-input>
          <el-upload multiple action="" v-model="ruleForm.options[1].img">
            <el-button>上传图片</el-button>
          </el-upload>
        </div>

        <div class="choice">
          <el-radio
            class="radio"
            :label="1"
            v-model="ruleForm.options[2].isRight"
            >C:</el-radio
          >
          <el-input class="inp" v-model="ruleForm.options[2].title"></el-input>
          <el-upload multiple action="" v-model="ruleForm.options[2].img">
            <el-button>上传图片</el-button>
          </el-upload>
        </div>

        <div class="choice">
          <el-radio
            class="radio"
            v-model="ruleForm.options[3].isRight"
            :label="1"
            >D:</el-radio
          >
          <el-input class="inp" v-model="ruleForm.options[3].title"></el-input>
          <el-upload multiple action="" v-model="ruleForm.options[3].img">
            <el-button>上传图片</el-button>
          </el-upload>
        </div>

        <el-button type="danger" disabled>+增加选项与答案</el-button>
      </el-form-item>

      <!-- 解析视频 -->
      <el-form-item label="解析视频">
        <el-input class="inp" v-model="ruleForm.videoURL"></el-input>
      </el-form-item>

      <!-- 答案解析 -->
      <el-form-item label="答案解析 :" prop="answer">
        <quillEditor
          v-model="ruleForm.answer"
          class="myQuillEditor"
        ></quillEditor>
      </el-form-item>

      <!-- 题目备注 -->
      <el-form-item label="题目备注 :" class="remark">
        <el-input
          class="inp"
          type="textarea"
          :rows="4"
          v-model="ruleForm.remarks"
        >
        </el-input>
      </el-form-item>

      <!-- 试题标签 -->
      <el-form-item label="试题标签">
        <el-select class="inp" filterable v-model="ruleForm.tags">
          <el-option></el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" @click="submit">确认提交</el-button>
    </el-form>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { list } from '../../api/hmmm/companys'
import { simple } from '../../api/hmmm/subjects'
import { provinces, citys } from '../../api/hmmm/citys'
import { add, detail } from '../../api/hmmm/questions'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科' }],
        catalogID: [{ required: true, message: '请选择目录' }],
        enterpriseID: [{ required: true, message: '请选择企业' }],
        province: [{ required: true, message: '请选择城市' }],
        direction: [{ required: true, message: '请选择方向' }],
        questionType: [{ required: true, message: '请选择题型' }],
        difficulty: [{ required: true, message: '请选择难度' }],
        question: [{ required: true, message: '请输入题干' }],
        answer: [{ required: true, message: '请输入答案解析' }]
      },
      subjectOptions: [],
      companyOptions: [],
      catalogOptions: [
        {
          value: 1,
          label: '黑马'
        },
        {
          value: 2,
          label: '千锋'
        }
      ],
      direction: [
        {
          value: '1',
          label: 'o2o'
        },
        {
          value: '2',
          label: '外包服务'
        },
        {
          value: '3',
          label: '企业服务'
        },
        {
          value: '4',
          label: '互联网金融'
        },
        {
          value: '5',
          label: '企业咨询'
        },
        {
          value: '6',
          label: '互联网'
        },
        {
          value: '7',
          label: '电子商务'
        }
      ],
      ruleForm: {
        subjectID: null,
        catalogID: null,
        enterpriseID: '',
        province: null,
        city: null,
        direction: null,
        questionType: '',
        difficulty: '',
        question: null,
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: 0
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: 0
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: 0
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: 0
          }
        ],
        videoURL: null,
        answer: null,
        remarks: null,
        tags: null
      }
    }
  },
  methods: {
    async submit () {
      await this.$refs.ruleForm.validate()
      try {
        const { data } = await add(this.ruleForm)
        console.log(data)
        this.$message.success('试题录入成功')
        this.$router.push({
          name: 'questions-list'
        })
      } catch (error) {
        console.log(error)
      }
    },

    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },

    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    }
  },

  async created () {
    //  搜索学科模块
    const { data } = await simple()
    this.subjectOptions = data

    this.getCityData()

    //  企业模块
    const res = await list({ pagesize: 1000 })
    // console.log(res.data.items)
    res.data.items = JSON.parse(
      JSON.stringify(res.data.items).replace(/company/g, 'label')
    )
    res.data.items = JSON.parse(
      JSON.stringify(res.data.items).replace(/id/g, 'value')
    )
    this.companyOptions = res.data.items
    // console.log(res.data.items)

    // 精选题库修改进入
    const questionDetail = await detail({ id: this.$route.query.id })
    this.ruleForm = { ...questionDetail.data }

    // 基础题库修改进入
    const basicDetail = await detail({ id: this.$route.params.id })
    this.ruleForm = { ...basicDetail.data }
  }
}
</script>
<style scoped lang="less">
.root {
  width: 97%;
  margin: 20px;
  padding: 18px;
  border-radius: 4px;
  background-color: #fff;

  .inp {
    width: 360px;
  }

  .cityInp {
    width: 170px;
    margin-right: 20px;
  }

  .myQuillEditor {
    height: 180px;
  }

  .questionChoice {
    margin-top: 90px;
  }

  .choice {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }

  .choiceInp {
    width: 300px;
  }

  .radio {
    margin: 20px 10px;
  }

  /deep/ .el-button--default {
    width: 100px;
    height: 60px;
    line-height: 36px;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
    margin-left: 4px;
    &:hover {
      color: #333;
      border-color: #409eff;
      background-color: transparent;
    }
  }

  /deep/ .el-button--danger {
    font-size: 13px;
    width: 138px;
    height: 30px;
    margin-left: 10px;
    margin-top: 20px;
    line-height: 10px;
  }

  .remark {
    margin-top: 80px;
  }

  /deep/ .el-button--primary {
    margin-left: 100px;
  }
}
</style>
